/**
 * Created by Administrator on 2017/7/14 0014.
 */
/**
 * Created by Administrator on 2017/3/1 0001.
 */
import React, {Component} from "react";

export default class Second extends Component{

    constructor(props) {
        super(props)
        this.state = {
        };
        this.isdown =false;
        this.csport = {x:210};
        this.msport = {x:100,y:20};
        this.rl =true;
        this.ud = true

        this.upboreder = this.csport.x-this.msport.x;
        this.downborder = this.csport.x -25;
        this.tall = 149 - this.msport.y;
        this.area = ((this.upboreder+this.downborder)*this.tall)/2;

        console.warn(this.area)
        console.warn(this.tall)

    }


    componentWillMount(){

    }

    componentDidMount(){
        this.ctx = this.refs.canvas.getContext('2d');
        this.ctx.fillStyle = "orange";
        this.ctx.beginPath();
        this.ctx.moveTo(25,149);
        this.ctx.lineTo(210,149);
        this.ctx.lineTo(210,20);
        this.ctx.lineTo(this.msport.x,this.msport.y);
        this.ctx.lineTo(25,149);
        // this.ctx.fill();
        this.ctx.stroke();
        this.ctx.closePath();


        this.ctx.beginPath();
        this.ctx.arc(this.msport.x, this.msport.y, 4, 0, Math.PI * 2, true);
        this.ctx.fillStyle = "grey";
        this.ctx.fill();
        this.ctx.stroke();
        this.ctx.closePath();

    }



    _mousedown(e){
        // this.isdown = true
        // this.x = e.screenX-this.state.x;
        // this.y = e.screenY-this.state.y;
        // this.mx = e.screenX+36-100;
        // this.my = e.screenY-100;
    }
    _mouseMove(e){

        if(!this.isdown){
            return
        }

        // if(e.screenX>500||e.screenX<110){
        //     return;
        // }
        // if(e.screenY>410||e.screenY<230){
        //     return;
        // }

        let bbox = this.refs.canvas.getBoundingClientRect();
        let mx = (e.screenX - bbox.left)*(this.refs.canvas.width / bbox.width);
        let my = (e.screenY - bbox.top-90)*(this.refs.canvas.height / bbox.height);

        // this.upboreder = this.csport.x-this.msport.x;
        // this.downborder = this.csport.x -25;


        // this.area

        // this.tall
        //
        // console.warn(this.csport.x+moverl);
        // console.warn(this.tall)

        // let remove = ((this.upboreder+this.downborder)-(this.area*2/this.tall))/2

        // console.warn(this.area*2/this.tall);


        if(Math.abs(this.msport.x-mx)>Math.abs(this.msport.y-my)){
            if(!this.rl){
                return;
            }
            this.ud = false;
            let moverl = this.msport.x - mx;
            this.ctx.clearRect(0,0,1000,1000);
            this.ctx.beginPath();
            this.ctx.moveTo(25,149);
            this.ctx.lineTo(this.csport.x-moverl/2,149);
            this.ctx.lineTo(this.csport.x-moverl/2,this.msport.y);
            this.ctx.lineTo(mx,this.msport.y);
            this.ctx.lineTo(25,149);
            // this.ctx.fill();
            this.ctx.stroke();
            this.ctx.closePath();

            this.ctx.beginPath();
            this.ctx.arc(mx, this.msport.y, 4, 0, Math.PI * 2, true);
            this.ctx.fillStyle = "grey";

            this.ctx.fill();

            this.ctx.stroke();
            this.ctx.closePath();

            // this.msport = {x:mx,y:my};
        }else{
            if(!this.ud){
                return;
            }
            this.rl = false;
            let moverly = 149 - my;
            let total = this.upboreder+this.downborder;

            let mx = ((total*129/moverly)-total)/2



            console.warn(moverly)

            this.ctx.clearRect(0,0,1000,1000);
            this.ctx.beginPath();
            this.ctx.moveTo(25,149);
            this.ctx.lineTo(210+mx,149);
            this.ctx.lineTo(210+mx,my);
            this.ctx.lineTo(this.msport.x,my);
            this.ctx.lineTo(25,149);
            // this.ctx.fill();
            this.ctx.stroke();
            this.ctx.closePath();


            this.ctx.beginPath();
            this.ctx.arc(this.msport.x, my, 4, 0, Math.PI * 2, true);
            this.ctx.fillStyle = "grey";
            this.ctx.fill();
            this.ctx.stroke();
            this.ctx.closePath();

            // this.msport = {x:this.msport.x,y:my};
        }

    }

    _mouseLive(){
        this.isdown = false
    }

    _mouseup(e){
        this.rl =true;
        this.ud = true
        let bbox = this.refs.canvas.getBoundingClientRect();
        let mx = (e.screenX - bbox.left)*(this.refs.canvas.width / bbox.width);
        let my = (e.screenY - bbox.top-90)*(this.refs.canvas.height / bbox.height);
        this.msport = {x:mx,y:my};
        this.isdown = false
    }



    addDview(){
        return(
            <div
                style={{marginTop:(this.state.y),marginLeft:(this.state.x)}}
                onMouseDown={this._mousedown.bind(this)}
                className="sdarg_div"/>
        );
    }

    _findCricle(e){
        let bbox = this.refs.canvas.getBoundingClientRect();
        let clickX = (e.screenX - bbox.left)*(this.refs.canvas.width / bbox.width);
        let clickY = (e.screenY - bbox.top-90)*(this.refs.canvas.height / bbox.height);
        // console.warn(clickX);
        // console.warn(clickY);
        // console.warn(this.msport.x);

        if((clickX>=this.msport.x-40-8&&clickX<=this.msport.x+36+8)&&(clickY<=this.msport.y+8&&clickY>=this.msport.y-8)){
            this.isdown = true
        }else{
            this.isdown = false
        }



    }



    render(){
        return(
                <canvas
                    className="canvertest" ref={'canvas'}
                    onMouseMove={this._mouseMove.bind(this)}
                    onMouseDown={this._findCricle.bind(this)}
                    onMouseUp = {this._mouseup.bind(this)}
                >
                </canvas>
        );
    }
}